<template>
    <div  class="app-container">
        
        <el-button style="font-size: 15px;" type="primary" @click="downLoad">
            导出数据
            <svg-icon icon-class="daochu"/>
        </el-button>

        <el-button style="font-size: 15px;" type="primary" @click="upLoad">
            导入数据
            <svg-icon icon-class="daoru" />
        </el-button>

        <el-dialog title="上传数据字典" :visible="visible">
            <el-upload
                class="upload-demo"
                drag
                action="http://192.168.96.128:9001/admin/dict/upLoad"
                multiple="false"
                accept=".xlsx"
                :before-upload="beforeAvatarUpload"
                :on-success="HandleSuccesss">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传 *.xlsx 文件，且不超过2MB</div>
            </el-upload>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogImportVisible">取消</el-button>
            </div>
        </el-dialog>
        
        <el-table
            :data="dictList"
            style="width: 100%; top: 20px;"
            row-key="id"
            border
            lazy
            :load="load"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">

            <el-table-column
            prop="name"
            label="名称"
            width="300">
            </el-table-column>

            <el-table-column
            prop="dictCode"
            label="编码"
            width="300">
            </el-table-column>

            <el-table-column
            prop="value"
            label="值"
            width="300">
            </el-table-column>

            <el-table-column
            prop="createTime"
            label="创建时间">
            </el-table-column>

        </el-table>
        
    </div>

</template>

<script>

    import dict from '@/api/dict'

    export default {
        data(){
            return{
                visible:false,
                dictList:[]
            }
        },
        methods:{
            dialogImportVisible(){
                this.visible = false;
            },
            HandleSuccesss(response, file, fileList){
                this.$message.success("文件上传成功!")
                this.dialogImportVisible();
                window.location.reload();
            },
            beforeAvatarUpload(file) {
                const isXLSX = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
                const isXLS = file.type ==='application/vnd.ms-exce';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isXLSX) {
                this.$message.error('上传文件只能是 .xlsx 格式!');
                }
                if (!isLt2M) {
                this.$message.error('上传文件大小不能超过 2MB!');
                }
                return isXLSX && isLt2M;
            },
            upLoad(){
                this.visible = true;
            },
            downLoad(){
                window.open("http://192.168.96.128:9001/admin/dict/downLoad");
            },
            findList(id){
                dict.getDictList(id).then(resp=>{
                    this.dictList = resp.data.dictList;
                })
            },
            load(tree, treeNode, resolve) {
            dict.getDictList(tree.id).then(response => {
                resolve(response.data.dictList)
            })
      }
        },
        created(){
            this.findList(1);
        }
    }
</script>
